<template>
  <div>
    <p>{{ $store.state.class }}</p>
    <img :src="$store.state.userInfo.logo" alt="" />
    <input type="button" value="点我改变state里面的图片" @click="btn" />

    <!-- 遍历通过actions异步传进来的数据 -->
    <ul>
      <li v-for="item in $store.state.bookk" :key="item.img">
          <img :src="item.img" alt="">
        <p>{{ item.name }}</p>
        <p>{{ item.price }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  created() {
    // 调用actions
    this.$store.dispatch("setFn");
  },
  methods: {
    btn() {
      this.$store.commit(
        "set",
        "https://www.runoob.com/wp-content/uploads/2016/02/react.png"
      );
    },
  },
};
</script>

<style>
img {
  width: 100px;
}
</style>